define(function(require) {


  var createEl = require('../util/createEl')

  var _ = require('underscore');

  var RADIUS = 3;

  function createDivs(opts) {
    var divs = [];
    var div = null;
    _.map(opts, function(opt) {
      div = createEl('div', opt.style);
      div.className = opt.attr.className;
      divs.push(div);
    });
    return divs;
  }

  function append(el, achilds) {
    var circlesFragment = document.createDocumentFragment();
    _.map(achilds, function(child) {
      circlesFragment.appendChild(child)
    })
    el.appendChild(circlesFragment)
  }

  function Elastic(node) {
    var props = node.props;

    var controlPoints = createDivs([{
      style: {
        x: props.width - RADIUS,
        y: -RADIUS,
        width: 2 * RADIUS,
        height: 2 * RADIUS
      },
      attr: {
        className: 'node-control-point ne'
      }
    }, {
      style: {
        x: props.width - RADIUS,
        y: props.height - RADIUS,
        width: 2 * RADIUS,
        height: 2 * RADIUS
      },
      attr: {
        className: 'node-control-point se'
      }
    }, {
      style: {
        x: -RADIUS,
        y: props.height - RADIUS,
        width: 2 * RADIUS,
        height: 2 * RADIUS
      },
      attr: {
        className: 'node-control-point sw'
      }
    }, {
      style: {
        x: -RADIUS,
        y: -RADIUS,
        width: 2 * RADIUS,
        height: 2 * RADIUS
      },
      attr: {
        className: 'node-control-point nw'
      }
    }]);

    var connectPoints = createDivs([{
      style: {
        x: props.width / 2 - RADIUS,
        y: -RADIUS,
        width: 2 * RADIUS,
        height: 2 * RADIUS
      },
      attr: { className: 'node-connect-point e' }
    }, {
      style: {
        x: props.width - RADIUS,
        y: props.height / 2 - RADIUS,
        width: 2 * RADIUS,
        height: 2 * RADIUS
      },
      attr: { className: 'node-connect-point s' }
    }, {
      style: {
        x: props.width / 2 - RADIUS,
        y: props.height - RADIUS,
        width: 2 * RADIUS,
        height: 2 * RADIUS
      },
      attr: { className: 'node-connect-point w' }
    }, {
      style: {
        x: -RADIUS,
        y: props.height / 2 - RADIUS,
        width: 2 * RADIUS,
        height: 2 * RADIUS
      },
      attr: { className: 'node-connect-point n' }
    }])

    var elasticBox = createEl('div', {
      x: 0,
      y: 0,
      width: props.width,
      height: props.height
    });

    elasticBox.className = 'node-elastic-box';

    //橡皮筋dom结构上属于node.el
    append(node.el, connectPoints.concat(controlPoints).concat(elasticBox))

    var active = false;

    node.on('hover', function() {
      _.map(connectPoints, function(point) {
        point.style.display = 'block'
      })
    })

    node.on('unhover', function() {
      if (!active) {
        _.map(connectPoints, function(point) {
          point.style.display = 'none'
        })
      }
    })

    node.on('active', function() {
      active = true;
      _.map(connectPoints, function(point) {
        point.style.display = 'block'
      })
      _.map(controlPoints, function(point) {
        point.style.display = 'block'
      })
      elasticBox.style.display = 'block'
    })
    node.on('unactive', function() {
      active = false;
      _.map(connectPoints, function(point) {
        point.style.display = 'none'
      })
      _.map(controlPoints, function(point) {
        point.style.display = 'none'
      })
      elasticBox.style.display = 'none'
    })

  }

  return Elastic;
})
